<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/pages/views/taglib.jsp"%>
<html>
<head>
    <title>详细情况</title>

    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">
        .loading{
            width:160px;
            height:56px;
            position: absolute;
            top:50%;
            left:50%;
            line-height:56px;
            color:#fff;
            padding-left:60px;
            font-size:15px;
            background: #000 url(${ctxStatic}/image/load.gif) no-repeat 10px 50%;
            opacity: 0.7;
            z-index:9999;
            -moz-border-radius:20px;
            -webkit-border-radius:20px;
            border-radius:20px;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
        }
    </style>

    <script type="text/javascript">
        function saveFile(filename,version){
            $("#loading").toggle();
            var catalog = "${catalog}";
            var templatesType = "${templatesType}";
            var path  = "${ctx}/DetailedCon/save";
            var contexts = $("#"+filename+version).val() ;
            $.ajax({
                type: "POST",
                url: path,//"/hnwr/h/stp/stpUpdateContract/save?id="+id,
                data:{
                    "catalog":catalog,
                    "filename":filename,
                    "templatesType":templatesType,
                    "contexts":contexts,
                    "version":version
                },
                datatype: 'text',
                cache: false,
                success: function(data) {
                    $("#loading").toggle();
                    //var jsonData = JSON.parse(data);
                    console.log(data);
                    if(data == 'success') {
                        alert("提交成功");
                    }else  {
                        alert("操作失败");
                    }
                },
                error: function(){    //调用出错执行的函数
                    alert("网络出现问题，请刷新界面。或者联系管理人员"); //请求出错处理
                }
            });
        }
    </script>
</head>
<body>
<div id="loading" class="loading" style="display:none">Loading pages...</div>
<div class="container">

    <div class="jumbotron">
        <h1>插件应用展示</h1>
        <p>show application</p>
    </div>
    <table class="table">
        <caption>信息</caption>
        <thead>
        <tr>
            <th>版本号</th>
            <th>docker-compose.yml</th>
            <th>rancher-compose.yml</th></tr>
        </thead>
        <tbody>
        <c:forEach items="${list}" var="de">
            <tr>
                <td>【${de.verion}】</td>
                <td>
                    <textarea class="form-control" id="dockerCompose${de.verion}" rows="6" cols="52">${de.dockerCompose}</textarea>
                    <br/>
                    <input class="btn btn-primary" value="保存 docker" type="button" onclick="saveFile('dockerCompose','${de.verion}')">
                </td>
                <td>
                    <textarea class="form-control" id="rancherCompose${de.verion}" rows="6" cols="52">${de.rancherCompose}</textarea>
                    <br/>
                    <input class="btn btn-primary" value="保存 rancher"  type="button" onclick="saveFile('rancherCompose','${de.verion}')">
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

</body>
</html>
